<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:40
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:19:22
 * @FilePath: \i-hos-app\shared\emr\src\components\file\EditSet.vue
 * @Description: 富文本编辑组件
-->
<template>
  <div class="edit_set">
    <!-- 富文本编辑配置 -->
    <div class="emr_setList_item" v-for="obj in computedEmrEditSet" :data-edit="obj._tp" @click="handEditSet(obj)">
      <!-- 判断二级配置列表是否具有下拉菜单 -->
      <!-- 如果有二级列表的下拉菜单,则使用下拉菜单 -->
      <el-dropdown v-if="!!obj._dd_list" trigger="hover" style="margin-top: 0.2em">
        <span class="el-dropdown-link" :data-edit="obj._tp">
          {{ obj._n }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="(_child, index) in obj._dd_list" :key="_child._tp + index" @click="handEditSet(_child)">
              <div class="el-dropdown_child" :data-edit="_child._tp" v-html="_child._n"></div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <!-- 没有二级菜单直接渲染图标-->
      <el-tooltip v-else effect="emr_popper" :content="obj._n" placement="top" :data-edit="obj._tp">
        <!-- 判断是否可以设置颜色 -->
        <span v-if="!!obj._tp.includes('Color')" class="emr_poper_color">
          <svg class="emr-icon" aria-hidden :data-edit="obj._tp">
            <use :xlink:href="'#' + 'icon-' + obj._tp" :data-edit="obj._tp"></use>
          </svg>
          <el-color-picker
            popper-class="emr_color_picker"
            v-model="obj._def_col"
            show-alpha
            color-format="hex"
            :predefine="obj._pred_col"
            @change="handEditSet(obj)"
          />
        </span>
        <svg class="emr-icon" aria-hidden :data-edit="obj._tp">
          <use :xlink:href="'#' + 'icon-' + obj._tp" :data-edit="obj._tp"></use>
        </svg>
      </el-tooltip>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { computed, toRefs, ComputedRef } from 'vue'
  // 自定义Symbol图标
  import '../../assets/font/iconfont'
  // 接口约束
  import { ISetType, ISetHead, ISetEmrState } from '../../interface/set'
  // 富文本编辑操作hooks
  import { useEdit } from '../../hooks/useEdit'
  // 电子病历配置数据
  import { useHeadSetStore } from '../../store/emr'
  // 解构 store的配置数据
  const headSetStore: ISetEmrState = useHeadSetStore()
  const { _emr_head_set } = toRefs<ISetEmrState>(headSetStore)

  // 获取父组件的值
  let props = defineProps({
    edition: {
      type: String,
      default: '',
    },
  })

  // 计算富文本编辑操作的配置项
  const computedEmrEditSet: ComputedRef<ISetHead> | any = computed((): ISetHead => {
    let obj: any = {}
    // 循环删选出富文本的配置数据
    for (let item of _emr_head_set.value) {
      if (item._tp === 'edit' && !!item._s_l) {
        // 判断是否使用缩减版
        if (props.edition === 'brief') {
          obj = item._s_l.filter((obj: ISetHead): boolean => !obj._isCut)
        } else {
          obj = item._s_l
        }
      }
    }
    return obj
  })

  // 操作富文本事件设置文本格式
  const handEditSet = (flag: ISetType): void => {
    if (flag._n == '行距' || flag._n == '字体大小' || flag._n == '字体' || flag._n == '正文') return
    useEdit(flag._tp as string, flag._tp?.includes('Color') ? (flag._def_col as string) : '')
  }
</script>
<style lang="scss" scoped>
  .emr-icon {
    width: 14px;
    height: 14px;
    vertical-align: -0.6em;
    fill: currentColor;
    overflow: hidden;
    margin-right: 2px;
  }
  .edit_set {
    display: flex;
    font-size: var(--theme-font-size);
    box-shadow: 0 0 4px rgb(64 158 255 / 40%);
    border-radius: 10px;
    padding: 2px 4px;
    background-color: #fff;
    z-index: 99;
    margin: 1px auto;
    overflow: auto;
    .emr_setList_item {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px;
      border-radius: 2px;
      cursor: pointer;
      .el-dropdown-link {
        font-size: var(--theme-font-size);
        white-space: nowrap;
        position: relative;
        &::before {
          content: '';
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-color: transparent;
          z-index: 99;
        }
      }
      .emr_poper_color {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
      }
      &:hover {
        background-color: #f5f7fa;
        svg {
          background-color: #f5f7fa;
        }
      }
    }
  }

  :deep(.el-dropdown_child) {
    p {
      font-size: 14px;
    }
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      padding: 5px 0;
      margin: 0;
    }
  }

  :deep(.el-dropdown) {
    :focus {
      outline: 0;
    }
  }
  :deep(.el-color-picker--small) {
    height: 10px;
    margin-top: -8px;
    .el-color-picker__trigger {
      height: 8px;
      padding: 0;
      ::before {
        content: '';
        display: block;
        width: 25px;
        height: 25px;
        background: transparent;
        position: absolute;
        top: -20px;
        left: -2px;
      }
      .el-icon {
        display: none;
      }
    }
  }
</style>
